<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>咨询建议投诉</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/app.css">
		<link rel="stylesheet" type="text/css" href="../../css/mui.picker.min.css" />
		<style>
			html,body{background-color: #fff;}
			.mui-bar-nav~.mui-content{overflow-x:hidden;overflow-y:auto;}
		     /*办理过程*/
		    .red{color:#ff0000;margin:0 .07rem;}
			.control_cont h6{width:90%;float:left;height:.7rem;line-height:.75rem;font-size:.3rem;color:#333;margin:0;box-sizing:border-box;padding-left:.25rem;}
			.control_cont h6>img{width:.23rem;float:left;margin:.178rem .13rem 0 .3rem;}
			 /*基本信息*/
	        .control_cont{width:100%;float:left;background-color: #fff;}
	        .basic_info{width:100%;float:left;padding:0;margin:0;}
		    .basic_info>li{width:100%;line-height:.85rem;border-bottom:1px solid #e5e5e5;min-height:1px;background:#fff;float:left;position:relative;}
		    .basic_info>li>label,.basic_info>li>a>label{width:2rem;float:left;text-align:left;font-size:.28rem;box-sizing:border-box;padding-left:.25rem;}
		    .basic_info>li>span,.basic_info>li>a>span{font-size:.28rem;color:#333;width:3.75rem;float:left;white-space:nowrap;text-overflow:ellipsis;margin-left:.6rem;}
			.work_name{width:100%;padding:.25rem .2rem;box-sizing:border-box;background:#fff;margin-bottom:.1rem;float:left;}
			.work_name>img{width:.82rem;height:.86rem;float:left;margin-right:.25rem;}
			.work_name>h5{width:5.5rem;float:left;line-height:.35rem;font-size:.32rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#333;margin:.05rem 0 0 0;}
			.work_name>.file_num{width:5.5rem;float:left;line-height:.3rem;font-size:.28rem;color:#666;margin-top:.12rem;}
			.mui-icon-arrowright{float:right;color:#adadad;font-size:.5rem;margin-top:-.2rem;font-weight:bold;}
			.blue{color:#104ffc;}
			.basic_info>li>a{display:block;width:100%;float;left;}
			.basic_info>li .mui-icon-arrowright{margin:.17rem 0 0 .05rem;float:left;}
			.basic_info>li .tel{width:.3rem;height:.33rem;float:right;background:url(../../images/jindu/tel.png) no-repeat;background-size:100% auto;margin-top:.27rem;margin-right:.44rem;}
			.basic_info>li .form_control{width:5.05rem;float:left;padding-left:0;box-sizing:border-box;line-height:.85rem;font-size:.28rem;border:none;height:.85rem;background:transparent;margin:0;padding:0;}
			/*.basic_info>li input[placeholder], [placeholder], *[placeholder] {color:#c7c7cd !important;}*/
			.code{color:#1653fc;font-size:.28rem;position:absolute;top:0;right:.4rem;width:1.6rem !important;text-align:right;}
			.control_cont .mui-btn-primary{width:6.8rem;height:.85rem;background:#1653fc;color:#fff;border-radius:.1rem;overflow:hidden;margin:.2rem 0 .2rem .35rem;float:left;font-size:.32rem;border: none;}
			.basic_info>li .choose{color:#333;margin-right:.24rem;margin-bottom:0;float:left;}
		    .basic_info>li .choose>b{width:.3rem;height:.3rem;float:left;margin-right:.1rem;background:url(../../images/work/zbxz-@2x.png) no-repeat;background-size:100% 100%;margin-top:.28rem;}
	        .basic_info>li .actb>b{background:url(../../images/jindu/result2x.png) no-repeat;background-size:100% auto;}
		    .basic_info>li .actb{color:#17bb13;}
		    .form_textares{height:2rem;border:none;margin:.21rem 0 -.2rem 0;padding:0;font-size:.28rem;overflow:auto;}
		    .file_list,.add_file{width:1.3rem;height:1.3rem;border-radius:4px;float:left;display:block;margin:.2rem .2rem .1rem 0;position:relative;}
		    .file_list>img,.add_file>img{width:100%;max-height:1.3rem;}
		    .file_list>i{display:block;position:absolute;top:-.1rem;left:-.1rem;width:.4rem;height:.4rem;background:url(../../images/yuyue/close.png) no-repeat;background-size:100% auto;}
		     button.blue{border:none;text-align:center;padding:0;width:1rem;line-height:.85rem;}
		     button.blue:active{background:transparent;}
		</style>
	</head>
	<body>
	<!--头部-->
	<div class="mui-bar mui-bar-nav" id="header">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left">
		</a>
		<h1 class="mui-title">我要<span class="type"></span></h1>
	</div>
	<div class="mui-content" id="content">
		<div class="control_cont">
			<h6>请填写<span class="type"></span>内容（带<span class="red">*</span>号的为必填项）</h6>
			<ul class="basic_info">
				<li>
					<a>
						<label><i class="red">*</i>姓名</label>
						<span style="width:3rem;min-width: 1rem;" >
							<input id="userName" maxlength="90" type="text" class="form_control" placeholder="请输入姓名" style="width:4.5rem;overflow:hidden;">
						</span>
						<input type="hidden" id="userName1" />
						<p class="choose fr radio_name"><b></b>匿名</p>
					</a>
				</li>
				<li class="mt10">
					<label><i class="red">*</i>手机号码</label>
					<span >
						<input id="lxrPhone" maxlength="15" type="text" class="form_control" placeholder="请输入手机号" style="width:4.5rem;overflow:hidden;">
					</span>
				</li>
				<li class="mt10" id="serviceBox" style="display: none;">
					<label><i class="red">&nbsp;</i>事项名称</label>
					<span id="serviceName">
					</span>
				</li>
				<li>
					<label><i class="red">&nbsp;</i><span class="type"></span>部门</label>
					<a><span id="organName">&nbsp;</span></a>
					<button class="blue" id="changeOrgan">选择</button>
				</li>
				<li>
					<label><i class="red">*</i>标题</label>
					<span><input maxlength="90" type="text" id="title" class="form_control" placeholder="请输入标题" style="width:4.5rem;overflow:hidden;"></span>
				</li>
				<li>
					<label><i class="red">*</i><span class="type"></span>内容</label>
					<span style="width:4.5rem;"><textarea id="contents" maxlength="1800" type="text" class="form_textares" placeholder="请输入内容"></textarea></span>
				</li>
				<li>
					<label><i class="red">&nbsp;</i>上传图片<br><!--<span style="font-size: 25%;">(最多上传5个，每次上传大小上限:2mb)</span> --> </label>
					<span style="width:4.5rem;">
			 		   <a id="add_file" class="add_file"><img src="../../images/yuyue/add_tu.png"></a>
			 		</span>
				</li>
				<li>
					<label><i class="red">*</i>验证码</label>
					<span><input type="text" id = "code" class="form_control" placeholder="请输入验证码"></span>
					<a id="getCode" class="code code01">获取验证码</a>
					<a class="code code02" style="display:none;">60s</a>
				</li>
				<li>
					<label><i class="red">*</i>是否公开</label>
					<span class="public">
						<input type="hidden" id="pubFlag" value="Y" />
			 			<p pubFlag='Y' class="choose actb fl" style="margin-right:.6rem;"><b></b>公开</p>
			 			<p pubFlag='N' class="choose fl"><b></b>不公开</p>
			 		</span>
				</li>
			</ul>
			<input id="save" type="button" class="mui-btn mui-btn-primary ripple" value="提交">
		</div>
	</div>
	<script type="text/javascript">
		var my_immersed = function(immersed) {
			document.getElementById("header").style.paddingTop = immersed + 'px';
			document.getElementById("header").style.height = (immersed + 44) + 'px';
			document.getElementById("content").style.paddingTop = (immersed + 44) + 'px';
		}
	</script>
	<script type="text/javascript" src="../../js/immersed.js"></script>
	<script type="text/javascript" src="../../js/mui.min.js"></script>
	<script type="text/javascript" src="../../js/common.js"></script>
	<script type="text/javascript" src="../../js/app.js" ></script>
	<script type="text/javascript" src="../../js/jquery2.2.4.min.js"></script>
	<script type="text/javascript" src="../../js/cutImg.js" ></script>
	<script type="text/javascript" src="../../js/file.js" ></script>
	<script>
		var organId,userId,sqType,netcaseId,serviceId,sq_site_id;
		(function(mui, $) {
			var typeJSON = {
				// 1-咨询 2-投诉 3-建议 4-纠错
				1:"咨询",
				2:"投诉",
				3:"建议"
			}
			$("#img").attr('src' ,utils.HOST + "validCodeServlet.servlet?"+new Date());
			mui.plusReady(function() {
				//重新back的方法
				//closeOpededNewView();
				sqType = plus.webview.currentWebview().type;
				$(".type").text(typeJSON[sqType]);
				serviceId = plus.webview.currentWebview().serviceId;
				netcaseId = plus.webview.currentWebview().caseId;
				sq_site_id = getCurrentDistrictId();
				showBaseInfo(serviceId);
				closeWaitingAndSwithView();
				//重写back
				mui.back = function(){ 
					plus.webview.currentWebview().opener().show('fade-in',100);
					plus.webview.currentWebview().close('zoom-fade-in',300);
				}
			})
			//保存
			document.getElementById("save").addEventListener('tap',function(){
				var attaIds = "";
				$(".file_list").each(function(){
					attaIds += $(this).attr('attaId')+";";
				})
				if(checkAll()){
					var url = "appUserAppeal/saveAppealMateria.do?userId="+userId+"&organId="+organId+"&sq_site_id="+sq_site_id;
					var sqInfoRegJSON = JSON.stringify({
						sqType:sqType,
						netUserId:userId,
						name:$("#userName").val(),
						phone:$("#lxrPhone").val(),
						title:$("#title").val(),
						content:$("#contents").val(),
						attaId:attaIds,
						pubFlag:$("#pubFlag").val(),
						serviceId:serviceId,
						netcaseId:netcaseId
					})
					utils.ajax(url,function(data){
						data = JSON.parse(data);
						if(data.state == 1){
							openNewWin(
								"_www/src/suqiu/saveAppralSuccess.html",
								null,
								'suqiu/saveAppralSuccess',
								{
									sqCode:data.sqCode,
									searchCode:data.searchCode,
									sqType:typeJSON[sqType]
								}
							)
						}else{
							mui.toast(data.msg ? data.msg : "保存失败请重试");
						}
					},jsonToParams({attaIds:attaIds,sqInfoRegJSON:sqInfoRegJSON}),{showWait:true})
				}
			})
			//验证
			var checkAll = function(){
				if(!$("#userName").val()) {
					mui.toast("请输入姓名");return false
				}
				if(!$("#lxrPhone").val()) {
					mui.toast("请输入手机号");return false
				}
				if(!isMoible($("#lxrPhone").val()) ){
					mui.toast("电话号码不正确");return false
				}
				if(!$("#title").val()) {
					mui.toast("请输入标题");return false
				}
				if(!$("#contents").val()){
					 mui.toast("请输入内容");return false
				}
				var code = $("#code").val();
				var oldCode = localStorage.getItem('code');
				if(!code) {
					mui.toast("请输入验证码");return false
				}
				var olddate = localStorage.getItem(oldCode);
				if(code != oldCode ){
					mui.toast("验证码错误");return false
				}
				if(new Date().getTime() - olddate > (2*60*1000)){
					mui.toast("验证码已过期,请重新获取验证码");return false
				}
				return true;
			}
			//上传图片
			document.getElementById("add_file").addEventListener('tap',function(){
				if($(this).prevAll().length<5){
					var addBtn = this;
					var options = {
						'url': 'appUserAppeal/upLoadAppealMateria.do',
						'success': uploadSuccess,
						datas:{
							userId:userId
						},
						'fail': upLoadFild,
						showWait:true
					};
					var imgSrc ;
					getImageWay(false,"选择图片",function(entry){
						options.filepath = entry;
						imgSrc = entry;
						uploadFile(options);
					})
					//上传成功回调
					function uploadSuccess (t) {
						var data = JSON.parse(t.responseText);
						if(data.state == '1' && data.success) {
							imgSrc = plus.io.convertLocalFileSystemURL( imgSrc );
							$('<a attaId="'+data.attaId+'" class="file_list"><i onclick="deleteAtta(this)"></i><img title="'+data.fileName+'" src="'+imgSrc+'"></a>').insertBefore(addBtn)
						}else {
							mui.toast(data.msg?data.msg:'上传失败请重试 !');
						}
					}
					//上传失败回调
					function upLoadFild() {
						mui.toast('上传失败请重试 !');
					}
				}else{
					mui.toast("最多只能上传5张图片");
				}
			})
			//获取用户信息
			var showBaseInfo = function(serviceId){
				userId = getUserId();
				if(userId){
					if(serviceId){
						$("#changeOrgan").hide();
					}
					var url = "appNetCase/getCaseRegStep2BaseInfo.do";
					utils.ajax(url,function(data){
						data = JSON.parse(data);
						if(data.state == 1){
							var user = data.user;
							$("#userName1").val(user.lxrName);
							$("#userName").val(user.lxrName);
							$("#userName").attr('readonly','readonly');
							$("#lxrPhone").val(user.lxrPhone);
							$("#lxrPhone").attr('readonly','readonly');
							
							var service = data.service;
							if(serviceId && service.organName){
								$("#serviceBox").show();
								$("#serviceName").text(service.serviceName);
								$("#organName").text(service.organName);
								organId = service.organId;
							}
						}else if(!service){
							mui.alert("无法获取办件信息",null,null,function(){
								plus.webview.currentWebview().close("zoom-fade-in",300);
							},"div")
						}
					},jsonToParams({userId:userId,serviceId:serviceId}),{showWait:true})
				}
			}
			//选择部门后
			window.addEventListener('updateOrgan',function(event){
				organId = event.detail.id;
				$("#organName").text(event.detail.name);
			});
			//选择部门
			document.getElementById("changeOrgan").addEventListener('tap',function(event){
				utils.showWaiting();
				openNewWin('_www/src/suqiu/select_bumen.html',null,'select_bumen.html',
				{beforeViewId:plus.webview.currentWebview().id,
					districtId:getCurrentDistrictId()});
			});
			//获取验证码 
			document.getElementById("getCode").addEventListener('tap',function(){
				if(!$("#lxrPhone").val() && isMoible($("#lxrPhone").val())) {
					mui.toast("请输入电话");return;
				}
				var j = $(this);
				sendSMS(SYS_PARAM.SEND_ID_CODE_SMS,$("#lxrPhone").val().trim(),function(code,autoShow){
					if(code){
						autoShow && $("#code").val(code) ;
						localStorage.setItem('code',code);
						localStorage.setItem(code,new Date().getTime());
						j.hide();
						$('.code02').show();
						setTimeout(countDown, 1000);
					}
				});
				var t = 60;
				function countDown() {//倒计时
					t--;
					if(t > 0) {
						$('.code02').text(t + 's');
						setTimeout(countDown, 1000);
					} else {
						$('.code02').hide();
						$('.code02').text('60s');
						j.show();
					}
				}
			})
			$('.public>p').click(function() {
				$('.public>p').removeClass('actb');
				$(this).addClass('actb');
				$("#pubFlag").val($(this).attr('pubFlag'));
			})
	
			//匿名
			$('.radio_name').click(function() {
				if($(this).hasClass('actb')) {
					$(this).removeClass('actb');
					$("#userName").removeAttr('readonly');
					if($("#userName1").val()){
						$("#userName").val($("#userName1").val())
					}else{
						$("#userName").val("");
					}
				} else {
					$(this).addClass('actb');
					$("#userName").val("匿名");
					$("#userName").attr('readonly','readonly');
				}
			})
		}(mui, jQuery))
		//删除上传图片
		function deleteAtta(ele) {
			var attaId = $(ele).parents('.file_list').attr('attaId');
			deleteFile("appUserAppeal/deleteAppealMateria.do",{userId:userId,attaId:attaId},function(){
				$(ele).parents('.file_list').remove();
			})
		}
	</script>
</body>
</html>

